import { Card, Icon, Image } from '@fomantic-react/main';

export default () => (
  <Card.Group link>
    <Card disabled>
      <Image src="/images/matthew.png" wrapped ui={false} />
      <Card.Content>
        <Card.Header>Matt Giampietro</Card.Header>
        <Card.Meta>
          <a>Friends</a>
        </Card.Meta>
        <Card.Description>Matthew is an interior designer living in New York.</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <span className="right floated">Joined in 2013</span>
        <span>
          <Icon name="user" />
          75 Friends
        </span>
      </Card.Content>
    </Card>
    <Card loading className="red">
      <Image src="/images/matthew.png" wrapped ui={false} />
      <Card.Content>
        <Card.Header>Matt Giampietro</Card.Header>
        <Card.Meta>
          <a>Friends</a>
        </Card.Meta>
        <Card.Description>Matthew is an interior designer living in New York.</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <span className="right floated">Joined in 2013</span>
        <span>
          <Icon name="user" />
          75 Friends
        </span>
      </Card.Content>
    </Card>
    <Card>
      <Image src="/images/matthew.png" wrapped ui={false} />
      <Card.Content>
        <Card.Header>Matt Giampietro</Card.Header>
        <Card.Meta>
          <a>Friends</a>
        </Card.Meta>
        <Card.Description>Matthew is an interior designer living in New York.</Card.Description>
      </Card.Content>
      <Card.Content extra>
        <span className="right floated">Joined in 2013</span>
        <span>
          <Icon name="user" />
          75 Friends
        </span>
      </Card.Content>
    </Card>
  </Card.Group>
);
